<template>
  <div class="ele-body ele-body-card" v-loading="fullscreenLoading">
    <el-row :gutter="15" v-if="name">
      <el-col :span="24" style="text-align: left;font-weight:bold;font-size:24px;margin-bottom: 20px">{{name}}</el-col>
    </el-row>
	  <el-row :gutter="15" v-else>
		  <el-col :span="24" style="text-align: left;font-size:24px;font-weight:bold;margin-bottom: 20px">{{analysisData.title}}</el-col>
	  </el-row>
    <!-- 顶部筛选 -->
    <el-row :gutter="15">
      <el-form ref="schoolForm" :inline="true" :model="schoolForm" label-width="80px">
        <el-form-item label="统计年度">
          <el-select
            filterable
            clearable
            v-model="schoolForm.niandu"
            @change="getAllData"
            size="small"
            placeholder="-学年统计-"
            class="ele-block">
            <el-option v-for="item in xuenianList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="统计日期">
          <el-col :span="24">
            <el-date-picker
              v-model="schoolForm.start_end"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="chooseDate"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="年级">
          <el-select
            filterable
            clearable
            v-model="schoolForm.gradeId"
            size="small"
            @change="getAllData"
            placeholder="-请选择年级-"
            class="ele-fluid">
            <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 顶部四个卡片 -->
    <el-row :gutter="15">
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #02AFFF;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/renshu.png" alt="" class="el-icon-dash">
            <div >专业总人数</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{analysisData.total}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #847FFF;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
            <div >专业班级数量</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{analysisData.zhuanye_num}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #00CFDE;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
            <div >老师数量</div>
          </div>
          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{ analysisData.teacher_num }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" :md="12">
        <el-card class="analysis-chart-card" style="background: #FF9E00;border-radius: 10px" shadow="never">
          <div class="analysis-chart-card-head">
            <img src="@/assets/dashboard/canyurenshu.png" alt="" class="el-icon-dash">
            <div >设备数量</div>
          </div>

          <div class="analysis-chart-card-content" style="padding-top: 4px;color:#fff;font-size: 18px;">
            <span>{{ analysisData.device_num }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 一行 -->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitschoolChart"
            style="height: 323px;"
            :option="xueYuanChartOption"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 30px;">
              <el-form-item label="专业班级">
                <el-select
                  filterable
                  clearable
                  v-model="canyulvDepartmentsId"
                  size="small"
                  placeholder="-请选择专业班级-"
                  @change="changeYuanxi($event,'canyulv')"
                  class="ele-fluid">
                  <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitxiangmucanyulvChart"
            style="height: 323px;"
            :option="xiangmuCYLChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 二行 各项目参与率-->
    <el-row :gutter="15">
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitHegelvChart"
            style="height: 323px;"
            :option="hegulvChartOption"/>
        </el-card>
      </el-col>
      <el-col :lg="12" :md="12">
        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 30px;">
              <el-form-item label="专业班级">
                <el-select
                  filterable
                  clearable
                  v-model="yundongDepartmentsId"
                  size="small"
                  placeholder="-请选择专业班级-"
                  @change="changeYuanxi($event,'yundong')"
                  class="ele-fluid">
                  <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visityundongChart"
            style="height: 323px;"
            :option="yundongSCChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 三行 各院系平均分-->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitpingjufenChart"
            style="height: 323px;"
            :option="yuanxiPJChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 四行 身高体重bim-->
    <el-row :gutter="15">
      <el-col :lg="18" :md="16" style="padding-right: 0!important;border-top-right-radius: 0!important;border-bottom-right-radius: 0!important;">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visittizhongChart"
            style="height: 323px;"
            :option="shengaoChartOption"/>
        </el-card>
      </el-col>
      <el-col  :lg="6" :md="8" style="padding-left: 0!important;border-top-left-radius: 0!important;border-bottom-left-radius: 0!important;">

        <!--        <el-card shadow="never" header="热门搜索">-->
        <!--          <ele-word-cloud-->
        <!--            ref="hotSearchChart"-->
        <!--            :data="hotSearchData"-->
        <!--            style="height: 303px;"/>-->
        <!--        </el-card>-->
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center">

          <div style="width: 100%;display: flex;justify-content: flex-end">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="专业班级">
                <el-select
                  filterable
                  clearable
                  v-model="tizhongDepartmentsId"
                  size="small"
                  placeholder="-请选择专业班级-"
                  @change="changeYuanxi($event,'tizhong')"
                  class="ele-fluid">
                  <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div style="width: 100%;display: flex;justify-content: center;margin-top: 5px">
            <el-button-group style="height: 40px;">
              <el-button :type="isall=='0'?'primary':''" size="small" @click="changenannv('0')">全部</el-button>
              <el-button :type="isall=='1'?'primary':''" size="small" @click="changenannv('1')">男生</el-button>
              <el-button :type="isall=='2'?'primary':''" size="small" @click="changenannv('2')">女生</el-button>
            </el-button-group>
          </div>
          <ele-chart
            ref="visittizhongpieChart"
            style="height: calc(238px);"
            :option="shengaopie"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 五行 各院系项目等级-->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;">
          <ele-chart
            ref="visitdengjiChart"
            style="height: 323px;"
            :option="yuanxiXMDJChartOption"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 六行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="专业班级">
                <el-select
                  filterable
                  clearable
                  v-model="manDepartmentsId"
                  size="small"
                  placeholder="-请选择专业班级-"
                  @change="changeYuanxi($event,'man')"
                  class="ele-fluid">
                  <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitmanChart"
            style="height: 323px;"
            :option="manClassScoreData"/>
        </el-card>
      </el-col>
    </el-row>
    <!-- 七行 -->
    <el-row :gutter="15">
      <el-col :lg="24" :md="24">
        <el-card
          shadow="never"
          header=""
          body-style="padding: 10px 5px 0 0;"
          style="display:flex;flex-direction: column;justify-content: center;position: relative;">
          <div style="right:15px;display: flex;justify-content: flex-end;position: absolute;top: 10px;z-index: 1000">
            <el-form :inline="true" :model="formYuanxi" class="demo-form-inline" style="height: 40px;">
              <el-form-item label="专业班级">
                <el-select
                  filterable
                  clearable
                  v-model="womanDepartmentsId"
                  size="small"
                  placeholder="-请选择专业班级-"
                  @change="changeYuanxi($event,'woman')"
                  class="ele-fluid">
                  <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <ele-chart
            ref="visitwomanChart"
            style="height: 323px;"
            :option="womanClassScoreData"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';
import EleWordCloud from 'ele-admin/packages/ele-word-cloud';

export default {
  name: 'DashboardAnalysis',
  components: {EleChart, EleWordCloud},
  data() {
    return {
      xuenianList:[],
      professionalId:'',
      departmentsId:'',
      type:'',
      name:'',
      isall:'0',
      // 支付笔数
      payNumData: [],
      // 身高院系搜索
      formYuanxi: {
        yuanxi: ''
      },
      //各院系成绩合格率
      duiBarChartOption:[],
      // 学院
      xueYuanData:[],
      // 销售量数据
      saleroomData: [],
      // 销售量排名数据
      saleroomRankData: [],
      // 最近1小时访问情况数据
      visitHourData: [],
      // 词云数据
      hotSearchData: [],
      schoolForm:{
        gradeId:'',
        niandu: '',
        type: '',
        begin: '',
        end: '',
        start_end:[],
        model:''
      },
      labelOption :{
        show: true,
        position: 'inside',
        formatter: '{c}%',
        color:'#fff',
        rotate: 90
      },
      // 年级列表
      gradeList: [],
      // 大屏预览总数据
      analysisData:{},
      //   合格率
      hegelvDataX:[],
      hegelvData:[],
      canyulvX:[],
      canyulvData:[],
      departmentsList:[],
      canyulvDepartmentsId:'',
      canyulvDepartments:'',
      yundongDepartmentsId:'',
      yundongDepartments:'',
      // 男生女生平均
      manDepartmentsId:'',
      manDepartments:'',
      womanDepartmentsId:'',
      womanDepartments:'',
      //身高体重
      tizhongDepartmentsId:'',
      tizhongDepartments:'',
      //运动时长
      yundongshichangData:[],
      //  各院系平均分
      yuanxi_avgsData:[],
      //   各项目等级
      project_levelData:[],
      //男生女生平均
      man_levelProjectData:[],
      man_levelProjectX:[],
      woman_levelProjectData:[],
      woman_levelProjectX:[],
      //身高体重
      high_weightWdata:[],
      high_weightHdata:[],
      high_weightX:[],
      weightData:[],
      weightDataX:[],
      weightManData:[],
      weightWomanData:[],
      fullscreenLoading:false
    };
  },
  computed: {
	  // 学院
	  xueYuanChartOption() {
		  /*if (!this.visitHourData.length) {
			return {};
		  }*/
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '学院'
			  },
			  grid:{
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  tooltip: {
				  trigger: 'axis',
				  formatter(params) {
					  let val0 = params[0]["value"];
					  let val1 = params[1]["value"];
					  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
					  let data0 = `${circle}#00BFFF"></span> ${
						  params[0]["seriesName"]
					  }: ${val0}%`;
					  let data1 = `${circle}#00EE76"></span> ${
						  params[1]["seriesName"]
					  }: ${val1}%`;
					  return `${params[0].axisValueLabel}<br/>${data0}<br/>${data1}`;
				  }
			  },
			  legend: {
				  data: ['参与时长', '参与率'],
				  
			  },
			  xAxis: [
				  {
					  type: 'category',
					  boundaryGap: false,
					  data: this.xueYuanData.map(d => d.time),
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value'
				  }
			  ],
			  series: [
				  {
					  name: '参与时长',
					  type: 'line',
					  smooth: true,
					  
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.xueYuanData.map(d => d.views),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}%'
					  }
				  },
				  {
					  name: '参与率',
					  type: 'line',
					  smooth: true,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.xueYuanData.map(d => d.visits),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  }
	  },
	  // 学院合格率
	  hegulvChartOption() {
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '各院系成绩合格率'
			  },
			  color:['#00BFFF',"#00EE76","#f1be17","#0beedb"],
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF',"#00EE76","#f1be17","#0beedb"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}%`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  legend: {},
			  grid: {
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  xAxis: [
				  {
					  type: 'category',
					  data: this.hegelvDataX,
					  axisLine: {
						  lineStyle: { color: '', width:0, height: 1 } // x轴
					  },
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value',
				  }
			  ],
			  series:this.hegelvData
		  }
	  },
	  //   项目参与率
	  xiangmuCYLChartOption(){
		  return {
			  title: {
				  text: '项目参与率'
			  },
			  color:["#00BFFF"],
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF'];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}%`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  itemStyle: {
				  opacity: 0.7,
				  borderRadius:10,
				  margin:10,
			  },
			  legend: {},
			  grid: {
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  xAxis: {
				  type: 'value',
				  boundaryGap: [0, 0.01]
			  },
			  yAxis: {
				  type: 'category',
				  data:this.canyulvX
			  },series: [
				  {
					  name: this.canyulvDepartments?this.canyulvDepartments:'全部',
					  type: 'bar',
					  data: this.canyulvData,
					  barWidth:10,
					  label: {
						  show: true,
						  position: 'right',
						  color:"#00BFFF",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  };
	  },
	  //运动时长
	  yundongSCChartOption() {
		  /*if (!this.visitHourData.length) {
			return {};
		  }*/
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '运动时长'
			  },
			  grid:{
				  top:'18%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF',"#00EE76"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}h`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  legend: {
				  data: ['男生', '女生']
			  },
			  xAxis: [
				  {
					  type: 'category',
					  boundaryGap: false,
					  data: this.yundongshichangData.map(d => d.time),
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value'
				  }
			  ],
			  series: [
				  {
					  name: '男生',
					  type: 'line',
					  smooth: false,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.yundongshichangData.map(d => d.views),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}h'
					  }
				  },
				  {
					  name: '女生',
					  type: 'line',
					  smooth: false,
					  areaStyle: {
						  opacity: 0.5
					  },
					  data: this.yundongshichangData.map(d => d.visits),
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}h'
					  }
				  }
			  ]
		  }
	  },
	  //各院系平均分
	  yuanxiPJChartOption(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title:{
				  text:'各院系平均分'
			  },
			  grid: {
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  legend: {},
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color =['#ff0230','#26ee5e','#00BFFF'];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val[index+1]}分`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  color:['#ff0230','#26ee5e','#00BFFF'],
			  dataset: {
				  source: this.yuanxi_avgsData
			  },
			  xAxis: {
				  type: 'category',
				  axisLabel:{
					  fontSize:12,
					  interval: 0,
					  rotate: 30
				  },
			  },
			  yAxis: { gridIndex: 0 },
			  series: [
				  {
					  type: 'line',
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' },
					  label: {
						  show: true,
						  position: 'top',
						  color:'#ff0230',
						  
					  },
				  },
				  {
					  type: 'line',
					  label: {
						  show: true,
						  position: 'top',
						  color:'#26ee5e',
						  
					  },
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' }
				  },
				  {
					  type: 'line',
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' },
					  label: {
						  show: true,
						  position: 'top',
						  color:'#00BFFF',
						  
					  },
				  }
			  ]
		  }
	  },
	  //   各院系项目等级
	  yuanxiXMDJChartOption(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title:{
				  text:'各院系项目等级'
			  },
			  grid: {
				  top:'15%',
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  legend: {},
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color =['#26ee5e','#36c9f6','#f1be17','#ff0230'];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val[index+1]}分`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  color:['#26ee5e','#36c9f6','#f1be17','#ff0230'],
			  dataset: {
				  source:this.project_levelData
			  },
			  xAxis: { type: 'category',
				  axisLabel:{
					  fontSize:12,
					  interval: 0,
					  rotate: 30
				  },},
			  yAxis: { gridIndex: 0 },
			  series: [
				  {
					  type: 'line',
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' },
					  label: {
						  show: true,
						  position: 'top',
						  color:'#26ee5e',
						  
					  },
				  },
				  {
					  type: 'line',
					  label: {
						  show: true,
						  position: 'top',
						  color:'#36c9f6',
						  
					  },
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' }
				  },
				  {
					  type: 'line',
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' },
					  label: {
						  show: true,
						  position: 'top',
						  color:'#f1be17',
						  
					  },
				  },
				  {
					  type: 'line',
					  label: {
						  show: true,
						  position: 'top',
						  color:'#ff0230',
						  
					  },
					  seriesLayoutBy: 'row',
					  emphasis: { focus: 'series' }
				  }
			  ]
		  }
	  },
	  //身高体重bim
	  shengaoChartOption(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title:{
				  text:'身高体重BMI'
			  },
			  color:["#00BFFF","#00EE76"],
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color =["#00BFFF","#00EE76"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}${index=='0'?'cm':'kg'}`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  grid:{
				  top:'18%',
				  x2:50,
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  legend: {
				  data: ['身高', '体重']
			  },
			  xAxis: [
				  {
					  type: 'category',
					  data: this.high_weightX,
					  axisPointer: {
						  type: 'shadow'
					  },
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value',
					  name: '身高',
					  min: 0,
					  max: 250,
					  interval: 25,
					  axisLabel: {
						  formatter: '{value} cm'
					  }
				  },
				  {
					  type: 'value',
					  name: '体重',
					  min: 0,
					  max: 100,
					  interval: 10,
					  axisLabel: {
						  formatter: '{value} kg'
					  }
				  }
			  ],
			  series: [
				  {
					  name: '身高',
					  type: 'bar',
					  tooltip: {
						  valueFormatter: function (value) {
							  return value + ' cm';
						  }
					  },
					  barWidth: 8,
					  data:this.high_weightHdata,
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}cm'
					  }
				  },
				  {
					  name: '体重',
					  type: 'bar',
					  barWidth: 8,
					  tooltip: {
						  valueFormatter: function (value) {
							  return value + ' cm';
						  }
					  },
					  data:this.high_weightWdata,
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}kg'
					  }
				  }
			  ]
		  }
	  },
	  shengaopie(){
		  return {
			  grid:{
				  top:'-6%'
			  },
			  legend: {
				  orient: 'vertical',
				  x: 'right',               // 水平安放位置，默认为全图居中，可选为：
				  y: '10%',
				  borderColor: '#ccc',       // 图例边框颜色
				  borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
				  padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
				  // 接受数组分别设定上右下左边距，同css
				  itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
				  // 横向布局时为水平间隔，纵向布局时为纵向间隔
				  itemWidth: 20,             // 图例图形宽度
				  itemHeight: 14,            // 图例图形高度
				  textStyle: {
					  color: '#333'    // 图例文字颜色
				  },
				  data:this.weightDataX
			  },
			  series: [
				  {
					  name: '',
					  type: 'pie',
					  radius: ['40%', '50%'],
					  center: ['50%', '50%'],
					  roseType: 'radius',
					  label: {
						  alignTo: 'labelLine',
						  formatter: `{name|{b}}\n\n{c}%`,
						  minMargin: 1,
						  edgeDistance: 4,
						  lineHeight: 8,
						  rich: {
							  name: {
								  fontSize: 14,
								  marginBottom:12
							  },
						  }
					  },
					  labelLine: {
						  length:10,
						  length2: 0,
						  maxSurfaceAngle: 80
					  },
					  emphasis: {
						  label: {
							  show: true
						  }
					  },
					  data: this.isall == '0'?this.weightData:(this.isall=='1'?this.weightManData:this.weightWomanData),
					  // 鼠标移上去的item不会凸出了
					  hoverAnimation: false,
					  
				  }
			  ]
		  }
	  },
	  //  男生各项目平均分与等级
	  manClassScoreData(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '男生各项目平均分与等级'
			  },
			  color:['#00BFFF',"#00EE76","#f1be17"],
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF',"#00EE76","#f1be17"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}${index=='0'?'分':'%'}`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  grid:{
				  top:'22%',
				  x2:50,
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  legend: {
				  data: ['分数', '合格率', '优良率']
			  },
			  xAxis: [
				  {
					  type: 'category',
					  data: this.man_levelProjectX,
					  axisPointer: {
						  type: 'shadow'
					  },
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value',
					  name: '分数',
					  min: 0,
					  axisLabel: {
						  formatter: '{value} 分'
					  }
				  },
				  {
					  type: 'value',
					  name: '比率',
					  min: 0,
					  max: 100,
					  axisLabel: {
						  formatter: '{value} %'
					  }
				  }
			  ],
			  series: [
				  {
					  name: '分数',
					  type: 'bar',
					  
					  barWidth:20,
					  data: this.man_levelProjectData[0],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}分'
					  }
				  },
				  {
					  name: '合格率',
					  type: 'line',
					  barWidth:20,
					  
					  data: this.man_levelProjectData[1],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}%'
					  }
				  },
				  {
					  name: '优良率',
					  type: 'line',
					  yAxisIndex: 1,
					  
					  data:this.man_levelProjectData[2],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#FFC125",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  };
	  },
	  //   女生各项目平均分与等级
	  womanClassScoreData(){
		  return {
			  dataZoom: {
				  // 开启数据平移
				  type: 'slider', // 滑动条单独显示
				  show: true, // 是否显示滑动条
				  startValue: 0, // 展示区域内容的起始数值
				  endValue: 16,// 展示区域内容的结束数值 当前展示x坐标下标为0-16
				  height: 10, // 滑动条组件高度
				  bottom: 0, // 距离图表区域下边的距离
				  showDetail: false, // 拖拽时是否显示详情
				  showDataShadow: false,
				  fillerColor: '#cfedfc', // 平移条的填充颜色
				  borderColor: 'transparent', // 边框颜色
				  zoomLock: true, // 锁定视图
				  brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
				  // 通过该属性可以只滑动，不显示缩放功能
				  handleStyle: {
					  opacity: 0,
				  },
				  lineStyle: {
					  opacity: 0,
				  },
				  textStyle: {
					  fontSize: 0,
				  },
			  },
			  title: {
				  text: '女生各项目平均分与等级'
			  },
			  tooltip: {
				  axisPointer: {
					  type: 'shadow'
				  },
				  trigger: 'axis',
				  formatter(params) {
					  console.log("====params",params)
					  let color = ['#00BFFF',"#00EE76","#f1be17"];
					  let newList = ``;
					  params.forEach((item,index)=>{
						  let val = item["value"];
						  let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
						  let data = `${circle}${color[index]}"></span> ${
							  item["seriesName"]
						  }: ${val}${index=='0'?'分':'%'}`;
						  newList = newList + `<br/>${data}`
					  })
					  return `${params[0].axisValueLabel}<br/>${newList}`;
				  }
			  },
			  grid:{
				  top:'22%',
				  x2:50,
				  left: '3%',
				  right: '4%',
				  bottom: '3%',
				  containLabel: true
			  },
			  color:["#00BFFF","#00EE76","#FFC125"],
			  legend: {
				  data: ['分数', '合格率', '优良率']
			  },
			  xAxis: [
				  {
					  type: 'category',
					  data: this.woman_levelProjectX,
					  axisPointer: {
						  type: 'shadow'
					  },
					  axisLabel:{
						  fontSize:12,
						  interval: 0,
						  rotate: 30
					  },
				  }
			  ],
			  yAxis: [
				  {
					  type: 'value',
					  name: '分数',
					  min: 0,
					  axisLabel: {
						  formatter: '{value} 分'
					  }
				  },
				  {
					  type: 'value',
					  name: '比率',
					  min: 0,
					  max: 100,
					  axisLabel: {
						  formatter: '{value} %'
					  }
				  }
			  ],
			  series: [
				  {
					  name: '分数',
					  type: 'bar',
					  
					  barWidth:20,
					  data: this.woman_levelProjectData[0],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00BFFF",
						  formatter: '{c}分'
					  }
				  },
				  {
					  name: '合格率',
					  type: 'line',
					  barWidth:20,
					  
					  data: this.woman_levelProjectData[1],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#00EE76",
						  formatter: '{c}%'
					  }
				  },
				  {
					  name: '优良率',
					  type: 'line',
					  yAxisIndex: 1,
					  data:this.woman_levelProjectData[2],
					  label: {
						  show: true,
						  position: 'top',
						  color:"#FFC125",
						  formatter: '{c}%'
					  }
				  }
			  ]
		  };
	  }
  },
  mounted() {
    this.getGradeList();
    this.getDepartmentsList();
    this.getXueList();
    this.getClassList();
    this.getAllData();
  },
  created(){
    this.departmentsId = this.$route.query.id
    this.professionalId = this.$route.query.professionalId
    this.name = this.$route.query.name
    this.type = this.$route.query.type
  },
  methods: {
    /**
     * 获取班级列表
     */
    getClassList() {
      this.$http.post('/clss/getClassList',{yid:this.departmentsId,pid:this.professionalId,stype:this.type}).then(res => {
        if (res.data.code === 0) {
          this.classList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getXueList() {
      this.$http.get('/annual/getXueList').then(res => {
        if (res.data.code === 0) {
          this.xuenianList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    changenannv(type){
      this.isall = type;
    },
    /**
     * 图表选择院系
     * **/
    changeYuanxi(e,type){
      switch (type) {
        case 'canyulv':
          console.log("====",e)
          this.canyulvDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.canyulvDepartments = item.name
            }
          })
          this.$refs.visitxiangmucanyulvChart.resize();
          this.getAllData();
          break;
        case 'yundong':
          console.log("====",e)
          this.yundongDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.yundongDepartments = item.name
            }
          })
          this.$refs.visityundongChart.resize();
          this.getAllData();
          break;
        case 'man':
          console.log("====",e)
          this.manDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.manDepartments = item.name
            }
          })
          this.$refs.visitmanChart.resize();
          this.getAllData();
          break;
        case 'woman':
          console.log("====",e)
          this.womanDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.womanDepartments = item.name
            }
          })
          this.$refs.visitwomanChart.resize();
          this.getAllData();
          break;
        case 'tizhong':
          console.log("====",e)
          this.tizhongDepartmentsId= e
          this.departmentsList.forEach((item)=>{
            if(item.id == e){
              this.tizhongDepartments = item.name
            }
          })
          this.$refs.visittizhongChart.resize();
          this.$refs.visittizhongpieChart.resize();
          this.getAllData();
          break;

        default:
          break
      }
    },
    /**
     * 获取年级列表
     */
    getGradeList() {
      this.$http.post('/grade/getGradesList').then(res => {
        if (res.data.code === 0) {
          this.gradeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取院系列表
     */
    getDepartmentsList() {
      this.getAllData();
      this.$http.post('/departments/getDepartmentsList', {type: this.schoolForm.type}).then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 选择日期
     */
    chooseDate(e){
      console.log("====1",e)
      this.schoolForm.begin = e[0];
      this.schoolForm.end = e[1];
      this.getAllData();
    },
    /* 学院 */
    getxueYuanData() {
      this.xueYuanData = this.analysisData.xueyuan;
      this.yundongshichangData = this.analysisData.yundongshichang;
      this.yuanxi_avgsData = this.analysisData.yuanxi_avgs;
      this.project_levelData = this.analysisData.project_level;
      this.man_levelProjectData = this.analysisData.man_level.data;
      this.woman_levelProjectData = this.analysisData.woman_level.data;
      this.man_levelProjectX = this.analysisData.man_level.project;
      this.woman_levelProjectX = this.analysisData.woman_level.project;
      this.high_weightWdata = this.analysisData.high_weight.weight;
      this.high_weightHdata = this.analysisData.high_weight.high;
      this.high_weightX = this.analysisData.high_weight.xueyuan;
      let arr = [];
      let arrx = [];
      this.analysisData.weight.map((item)=>{
        let obj = {
          "value": item.value,
          "name": item.name,
          itemStyle: {
            opacity: 0.7,
            margin:10,
            borderRadius: 15
          }
        }
        arr.push(obj)
        arrx.push(obj.name)
      });
      let arr2 = []
      this.analysisData.weight_man.map((item)=>{
        let obj = {
          "value": item.value,
          "name": item.name,
          itemStyle: {
            opacity: 0.7,
            margin:10,
            borderRadius: 15
          }
        }
        arr2.push(obj)
      });
      let arr3 = []
      this.analysisData.weight_woman.map((item)=>{
        let obj = {
          "value": item.value,
          "name": item.name,
          itemStyle: {
            opacity: 0.7,
            margin:10,
            borderRadius: 15
          }
        }
        arr3.push(obj)
      });
      this.weightData = arr;
      this.weightManData = arr2;
      this.weightWomanData = arr3;
      this.weightDataX = arrx;
    },
    /**
     * 处理合格率数据
     * **/
    gethegelvData(){
      this.analysisData.hegelv.series.map(item=>{
        item.label = this.labelOption
        let data = []
        item.data.map(items=>{
          data.push(Number(items.slice(0,items.length-1)));
        })
        item.data = data;
      })
      this.hegelvDataX = this.analysisData.hegelv.data
      this.hegelvData = this.analysisData.hegelv.series
      console.log(this.hegelvData)
    },
    /**
     * 获取项目参与率
     * **/
    getxiangmucanyuLv(){
      this.canyulvX = this.analysisData.canyulv.data;
      this.canyulvData = this.analysisData.canyulv.yzhou;
    },
    /* 获取基本的chart 数据 */
    getAllData(){
      let params = {
        ...this.schoolForm,
        canyulv:this.canyulvDepartmentsId,
        yundongshichang:this.yundongDepartmentsId,
        high_weight:this.tizhongDepartmentsId,
        man_level:this.manDepartmentsId,
        woman_level:this.womanDepartmentsId,
        departmentsId:this.departmentsId,
        professionalId:this.professionalId
      }
      this.fullscreenLoading = true;
      this.$http.post('/data/zhuanye',params).then(res => {
        if (res.data.code === 0) {
          this.analysisData = res.data.data;
          //   获取学院数据
          this.getxueYuanData();
          // 获取合格率数据
          this.gethegelvData();
          //   获取项目参与率数据
          this.getxiangmucanyuLv();
        } else {
          this.$message.error(res.data.msg);
        }
        this.fullscreenLoading = false;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  },
  activated() {
    ['visitschoolChart','visitHegelvChart','visityundongChart','visitpingjufenChart','visitdengjiChart','visitwomanChart','visitmanChart','visittizhongChart', 'visittizhongpieChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  }
}
</script>

<style scoped lang="less">
/* 统计卡片4个 */
.analysis-chart-card-head{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 8px;
  .el-icon-dash{
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
}
/* 统计卡片 */
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &:first-child{
    margin-bottom: 6px;
  }
  span{
    display: inline-block;
    width: 45%;
  }
}

.analysis-chart-card-text {
  padding-top: 12px;
}

/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
</style>
